<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    // 描边设置
    // ctx.lineWidth = 5;
    // ctx.strokeStyle = 'black';

    // 绘制圆的路径, 0°是从三点钟方向开始的
    ctx.beginPath();
    ctx.arc(50, 50, 50, 0, Math.PI * 2, false);

    // 给路径描边
    // ctx.stroke();

    // 填充
    ctx.fillStyle="red";
    ctx.fill()

    // 如果需要边框，则将以上注释掉的代码放开
</script>
</body>
</html>